<template>
  <view :style="titleStyle" @click="$emit('click')">
    {{ component.text }}
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = defineProps<{
  component: StorePageTitleItem;
}>();

defineEmits<{
  click: [];
}>();

const rpxRatio = computed(() => {
  const system = uni.getSystemInfoSync();
  return 750 / system.windowWidth;
});
const titleStyle = computed(() => {
  const style: CSSProperties = {
    fontWeight: 'bold'
  };
  if (!props.component) return undefined;
  if (props.component.textAlign) {
    style.textAlign = props.component.textAlign as 'left' | 'center' | 'right';
  }
  if (props.component.textSize) {
    style.fontSize = `${props.component.textSize * rpxRatio.value}rpx`;
  }
  if (props.component.textLineHeight) {
    style.lineHeight = `${props.component.textLineHeight * rpxRatio.value}rpx`;
  }
  if (props.component.textColor) {
    style.color = props.component.textColor;
  }
  if (props.component.textBgColor) {
    style.backgroundColor = props.component.textBgColor;
  }
  if (props.component.textPadding?.top) {
    style.paddingTop = props.component.textPadding.top;
  }
  if (props.component.textPadding?.right) {
    style.paddingRight = props.component.textPadding.right;
  }
  if (props.component.textPadding?.bottom) {
    style.paddingBottom = props.component.textPadding.bottom;
  }
  if (props.component.textPadding?.left) {
    style.paddingLeft = props.component.textPadding.left;
  }
  return style;
});
</script>

<style lang="scss" scoped></style>
